<template>
  <div class="login">
    <div class="left">
      <img src="../../public/loginimg.png" />
    </div>
    <div class="from-box">
      <div class="form">
        <div class="title">歡迎回來</div>
        <div class="switch">
          <div :class="{ active: loginType == 0 }" @click="loginType = 0">
            Admin登入
          </div>
          <div :class="{ active: loginType == 1 }" @click="loginType = 1">
            老師登入
          </div>
        </div>
        <el-input
          size="large"
          class="form-item"
          v-model="user"
          placeholder="電郵地址"
        />
        <el-input
          size="large"
          type="password"
          class="form-item"
          v-model="password"
          placeholder="密碼"
        />
        <el-button class="submit" @keyup.enter="login" @click="login">登入</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElLoading } from "element-plus";
import request from "@/utils/request";
export default {
  name: "login",
  data() {
    return {
      user: "",
      password: "",
      loginType: 0,
    };
  },
  methods: {
    async login() {
      if (!this.user) {
        ElMessage.error("请输入用户名！");
        return;
      }
      if (!this.password) {
        ElMessage.error("请输入密码！");
        return;
      }
      const loading = ElLoading.service();
      const res = await request.POST(
        this.loginType == 0
          ? "/sys/sys_user/login"
          : "/sys/sys_user/teacher/login",
        {
          account: this.user,
          password: this.password,
        }
      );
      loading.close();
      if (res.status == 100100) {
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify({}));
        this.$router.push("/home");
        localStorage.setItem("loginType", this.loginType);
      } else {
        ElMessage.error(res.message);
      }
    },
  },
};
</script>

<style scoped>
.submit {
  margin-top: 8px;
  height: 56px;
  background-color: #ff5d47;
  width: 100%;
  color: #fff;
}
.form-item {
  height: 56px;
  margin-bottom: 24px;
}
.switch div {
  width: 165px;
  height: 56px;
  text-align: center;
  line-height: 56px;
  color: #a6b4ba;
  border-radius: 6px;
  font-size: 14px;
}
.active {
  background-color: #fff;
  color: #000 !important;
}
.switch {
  cursor: pointer;
  margin-bottom: 32px;
  width: 336px;
  height: 62px;
  background-color: #f4f6f7;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 40px;
}
.from {
  width: 480px;
}
.from-box {
  width: 50%;
  min-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.left {
  flex: 1;
  background-color: #f4f6f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login {
  color: #000;
  display: flex;
  min-width: 800px;
  height: 100%;
}
</style>
